<template>
  <div>
    <form @submit.prevent="onSubmit">
      <!-- account -->
      <div>
        <label for="account">账号</label>
        <input type="text" v-model="account" />
      </div>
      <!-- password-->
      <div>
        <label for="password">密码</label>
        <input type="password" v-model="password" />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      account: "",
      password: ""
    };
  },
  methods: {
    onSubmit() {
      // console.log(12321);
      // 先从数据库中获取数据，然后遍历数据，再过滤出匹配好的数据
      axios.get("/user.json").then(res => {
        // console.log(res);
        // console.log(res.data);
        const data = res.data;
        const users = [];
        for (let key in data) {
          const user = data[key];
          // console.log(user);
          users.push(user);
        }
        let result = users.filter(user => {
          return (
            user.account === this.account && user.password === this.password
          );
        });
        if (result != null && result.length > 0) {
          this.$router.push({ name: "homeLink" });
        } else {
          alert("账号或密码错误！");
        }
      });
    }
  }
};
</script>